<template>
	<view>
		<view style="height: 24rpx;"></view>
		<view class="empty" v-if="systemList.length === 0">
			<image class="empty-img" src="https://static.wddzq.com/static/kong.png"></image>
			<view class="empty-text">暂无关注～</view>
		</view>
		<view v-for="(item, index) in systemList" :key="item.id">
			<view class="cell">
				<view style="position: relative;width: 96rpx;height: 102rpx;display: flex;justify-content: center;">
					<image class="cell-left" style="margin-top: 6rpx;margin-left: 4rpx;" mode="aspectFill" :src="item.headPic" />
					<image v-if="item.vipOrNot" style="position: absolute;top:0;left: 0;width: 96rpx;height: 102rpx;" src="https://static.wddzq.com/static/V3/shequtouxiangkuang.png" />
				</view>
				<view class="cell-info">
					<view class="cell-text">{{item.nickname || 'dsds'}}</view>
					<view class="cell-desc">
            {{ item.signature }}
					</view>
				</view>
				<view class="cell-btns">
					<button class="atten" @click="handleAtten(item.userId)" v-if="item.status === 0"><image class="atten-img" src="../../static/logo.png" /> 关注</button>
					<button class="attened" @click="handleAtten(item.userId)" v-if="item.status === 1"><image class="atten-img" src="../../static/logo.png" />已关注</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import {getUserFollowPage, commitUserAttention, getUserAttentionPage} from '../../config/api.js';
	import { to } from '../../config/utils.js';
	
	export default {
		data() {
			return {
				filterData: {
					pages: 1,
					size: 20,
				},
				loading: false,
				hasMore: true,
				systemList: [],
				type: '',
				userId: '',
			}
		},
		onPullDownRefresh() {
			this.resetSystem();
		},
		onReachBottom() {
			if(this.loading || !this.hasMore) return;
			this.filterData = {
				...this.filterData,
				pages: this.filterData.pages + 1
			};
			this.fetchUserFollowPage(this.filterData)
		},
		onLoad(options) {
			this.type = options.type;
      this.userId = options.userId;
		},
		onReady() {
			this.resetSystem();
		},
		methods: {
			async handleAtten(id) {
				let params = {
					userId: id
				};
				const [err, data] = await to(commitUserAttention(params));
				
				if(err) {
					return uni.showToast({
						title: err?.msg || '请求失败',
						icon: 'none'
					})
				}
				uni.showToast({
					title: data?.data || '操作成功',
					icon: 'none'
				})
			},
			// 重新请求接口
			resetSystem() {
				let params = {
					...this.filterData,
					pages: 1,
				};
				this.loading = false;
				this.hasMore = true;
				this.fetchUserFollowPage(params, true);
			},
			async fetchUserFollowPage(params, isClear) {
				this.loading = true;
				params.current = params.pages;
				params.userId = this.userId;
				const [err, systemList] = await to(getUserAttentionPage({...params}));
				this.loading = false;
				uni.stopPullDownRefresh();
				if(err) return;
				let records = systemList?.data?.records || [];
				
				if(records.length < this.filterData.size) {
					this.hasMore = false;
				}
				this.systemList = isClear ? records : this.systemList.concat(records);
			},
			handleClick(actionType, pathLink) {
				if(actionType === 1) {
					pathLink && uni.navigateTo({
						url: pathLink
					})
				} else if(current.actionType === 2) {
					pathLink && uni.navigateTo({
						url: `/pages/webview/webview?url=` + encodeURIComponent(`${pathLink}`)
					})
				}
			},
			async handleAgree(userDiDiId, index) {
				let params = {
					userDiDiId
				};
				const [err, data] = await to(confirmUserDiDi({...params}));
				if(err) {
					return uni.showToast({
						title: err?.msg || '操作失败'
					})
				}
				let _systemList = [...systemList];
				_systemList[index].status = 2;
				this.systemList = _systemList
			},
			async handleDisagree(userDiDiId) {
				let params = {
					userDiDiId
				};
				const [err, data] = await to(refuseUserDiDi({...params}));
				if(err) {
					return uni.showToast({
						title: err?.msg || '操作失败'
					})
				}
				
				let _systemList = [...systemList];
				_systemList[index].status = 3;
				this.systemList = _systemList
			}
		}
	}
</script>

<style>
.cell {
	background-color: #fff;
	padding: 0 24rpx;
	display: flex;
	align-items: center;
}
.cell image.cell-left {
	width: 80rpx;
	height: 80rpx;
	margin: 35rpx 0;
	border-radius: 40rpx;
}
.cell-info {
	flex: 1;
	border-bottom: 1rpx solid #eee;
	padding: 35rpx 0;
	margin-left: 16rpx;
}
.cell-info .cell-text {
	height: 40rpx;
	font-size: 32rpx;
	font-weight: 500;
	color: #333333;
	line-height: 40rpx;
}
.cell-info .cell-desc {
	height: 36rpx;
	font-size: 28rpx;
	font-weight: 400;
	color: #999999;
	line-height: 36rpx;
	margin-top: 10rpx;
}
.cell-time {
	height: 32rpx;
	font-size: 24rpx;
	font-weight: 400;
	color: #999999;
	line-height: 32rpx;
}

.cell-btns {
	display: flex;
}
.cell-btns button {
	width: 112rpx;
	height: 64rpx;
	border-radius: 32rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	
	font-size: 32rpx;
	font-weight: 400;
	border: none;
	padding: 0;
}
.cell-btns button.disagree {
	background: #FFEEEF;
	color: #FF6565;
}

.cell-btns button.atten {
	margin-left: 16rpx;
	width: 138rpx;
	height: 56rpx;
	background: #FFFFFF;
	border-radius: 28rpx;
	border: 1rpx solid #FFB803;
	font-size: 28rpx;
	font-weight: 500;
	color: #FFB803;
}
.cell-btns button.atten image, .cell-btns button.attened image {
	width: 30rpx;
	height: 30rpx;
	margin-right: 5rpx;
}

.cell-btns button.attened {
	margin-left: 16rpx;
	width: 166rpx;
	height: 56rpx;
	font-size: 28rpx;
	font-weight: 500;
	color: #FFB803;
	background: #FFFFFF;
	border-radius: 28rpx;
	border: 1rpx solid #CCCCCC;
	color: #999999;
}
.cell-right {
	width: 120rpx;
	height: 120rpx;
}
</style>
